<template>
    <PopupView
            :on-open="onOpen"
            :on-close="onClose"
            position="right"
            width="70%"
            ref="filterPopup"
    >
        <group title="排序">
            <checker
                    v-model="filterQuery.ordering"
                    type="checkbox"
                    default-item-class="default-item-class vux-1px"
                    selected-item-class="selected-item-class vux-1px"
                    class="checker-item-container"
            >
                <checker-item
                        v-for="(item, index) in init.orderRules"
                        :value="item.value"
                        :disabled="orderRuleIsDisabled(item.value)"
                        :key="`order-${index}`"
                >{{item.label}}
                </checker-item>
            </checker>
        </group>
        <group title="创建时间">
            <flexbox>
                <flexbox-item>
                    <datetime
                            v-model="filterQuery.start_time"
                            :end-date="filterQuery.end_time"
                            placeholder="开始日期"
                    />
                </flexbox-item>
                <flexbox-item>
                    <datetime
                            v-model="filterQuery.end_time"
                            :end-date="$moment().format('YYYY-MM-DD')"
                            placeholder="结束日期"
                    />
                </flexbox-item>
            </flexbox>
        </group>
        <group title="工作地">
            <x-input
                    v-model="filterQuery.search"
                    @on-click-clear-icon="onClearClick"
                    placeholder="例如：武汉、南昌 ..."
                    :debounce="500"
            />
        </group>
        <group title="招聘类型">
            <checker
                    v-model="filterQuery.type"
                    default-item-class="default-item-class vux-1px"
                    selected-item-class="selected-item-class"
                    class="checker-item-container"
            >
                <checker-item
                        v-for="(item, index) in init.type"
                        :value="item.value"
                        :key="`type-${index}`"
                >{{item.label}}
                </checker-item>
            </checker>
        </group>
        <group title="部门">
            <checker
                    v-model="filterQuery.department"
                    default-item-class="default-item-class vux-1px"
                    selected-item-class="selected-item-class"
                    class="checker-item-container"
            >
                <checker-item
                        v-for="(item, index) in init.departmentList"
                        :value="item.id"
                        :key="`department-${index}`"
                >{{item.name}}
                </checker-item>
            </checker>
        </group>

        <template #footer>
            <flexbox style="padding: .5rem;">
                <flexbox-item>
                    <x-button
                            @click.native="onReset"
                            action-type="button"
                    >重置
                    </x-button>
                </flexbox-item>
                <flexbox-item>
                    <x-button
                            @click.native="onFilter"
                            type="primary"
                            action-type="button"
                    >确定
                    </x-button>
                </flexbox-item>
            </flexbox>
        </template>
    </PopupView>
</template>

<script>
    import PopupView from '../widget/popup-view/PopupView';
    import {
        Flexbox,
        FlexboxItem,
        Group,
        Checker,
        CheckerItem,
        Datetime,
        XInput,
        XButton
    } from 'vux';

    export default {
        name: 'FilterPopup',
        props: {
            query: {
                type: Object
            }
        },
        components: {
            PopupView,
            Flexbox,
            FlexboxItem,
            Group,
            Checker,
            CheckerItem,
            Datetime,
            XInput,
            XButton
        },

        mounted() {
            this.loadInitData();
        },

        data() {
            return {
                init: {
                    type: [
                        {
                            label: '实习',
                            value: '1'
                        },
                        {
                            label: '兼职',
                            value: '2'
                        },
                        {
                            label: '校招',
                            value: '3'
                        },
                        {
                            label: '社招',
                            value: '4'
                        }
                    ], // type

                    orderRules: [
                        {
                            label: '按薪资升序',
                            value: 'salary_min'
                        },
                        {
                            label: '按薪资降序',
                            value: '-salary_min'
                        },
                        {
                            label: '按创建时间升序',
                            value: 'create'
                        },
                        {
                            label: '按创建时间降序',
                            value: '-create'
                        }
                    ], // orderRules

                    departmentList: []
                }, // init

                filterQuery: {
                    // 筛选
                    start_time: '',
                    end_time: '',
                    working_place: '',
                    department: null,
                    type: null,

                    // 排序
                    ordering: [],

                    // 模糊查询
                    search: ''
                }
            };
        },

        methods: {
            open() {
                this.$refs.filterPopup.open();
            },

            close() {
                this.$refs.filterPopup.close();
            },

            onOpen() {
                if (this.query) {
                    Object.assign(this.filterQuery, this.query);
                }
            },

            onClose() {
            },

            onFilter() {
                this.close();
                this.$emit('on-filter', this.filterQuery);
            },

            onReset() {
                this.filterQuery = {
                    start_time: '',
                    end_time: '',
                    working_place: '',
                    department: null,
                    type: null,
                    ordering: [],
                    search: ''
                };
                this.onFilter();
            },

            onClearClick() {
                alert('清除 input');
            },

            loadInitData() {
                this.$API.department.getAll()
                    .then(resp => {
                        this.init.departmentList = resp.data.data || [];
                    }, () => {
                    })
                    .finally(() => {
                    });
            },

            orderRuleIsDisabled(value) {
                if (value.startsWith('-')) {
                    return this.filterQuery.ordering.includes(value.substring(1, value.length));
                } else {
                    return this.filterQuery.ordering.includes(`-${value}`);
                }
            }
        }
    };
</script>

<style scoped>
    .default-item-class {
        margin: 0 .5rem .5rem 0;
        padding: .25rem;
    }

    .default-item-class.vux-1px::before {
        border-radius: 10px;
    }

    .selected-item-class {
    }

    .selected-item-class.vux-1px::before {
        background-color: rgba(255, 0, 0, .1);
        border-color: #ff0000;
    }

    .checker-item-container {
        padding: .5rem .5rem 0 .5rem;
    }
</style>
